<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Front End Interview Process</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/serif.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Front-End</h1>
					<h2>Interview</h2>
					<br>
					<h3 class="fragment"><a href="http://goo.gl/89K2FI">http://goo.gl/89K2FI</a></h3>
					<br>
					<p>
						<h4>
							<a href="http://www.thatjsdude.com/">www.thatJSDude.com</a> / <a href="http://twitter.com/mdkhan005">@mdkhan005</a>
						</h4>
					</p>
					<p>(youtube.com/user/khanLearning)</p>
				</section>
				<section>
					<section>
						<h1>Web Developer</h1>
					</section>
					<section>
						<img src="images/webDeveloper.jpg" alt="">
					</section>
					<section>
						<img src="images/developer.jpg" alt="">
					</section>
					<section>
						<img src="images/shave.jpg" alt="">
					</section>
				</section>
				<section>
					<section>
						<h1>Employer Rules</h1>
					</section>
					<section>
						<h1>Basic Rules</h2>
						<ol class="stretch">
							<li class="fragment"><h3>Always worth more to other emoployer</h3></li>
							<li class="fragment"><h3>This is like romantic relation</h3></li>
							<li class="fragment">
								<h3>Unless, you got another offer</h3>
							</li>
							<li class="fragment">HR works for the company not for you</li>
							<li class="fragment">All employees are NOT treated equally</li>
							<li class="fragment">Get things in written</li>
							<li class="fragment">The grand excuse: Corporate Policy</li>
						</ul>
					</section>
				</section>
				<section>
					<section>
						<h1>Interview Process</h1>
					</section>
					<section>
						<h2>Make Sure</h2>
						<ul>
							<li>
								<h3>Why are you looking for a job?</h3>
							</li>
							<li class="fragment">
								<h3>Set your goal</h3>
							</li>
							<li class="fragment">
								<h3>Set timeline</h3>
							</li>
							<li class="fragment">
								<h3>living cost in new city</h3>
							</li>
						</ul>
						<aside class="notes">
							Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
						</aside>
					</section>
					<section>
						<h2>1. Prepare</h2>
						<p>You are selling your self</p>
						<ul>
							<li class="fragment">
								<h3>Prepare Resume</h3>
							</li>
							<li class="fragment">
								<h3>Update Linkedin Profile</h3>
							</li>
							<li class="fragment">
								<h3>Hide it from your boss</h3>
							</li>
							<li class="fragment">
								<h3>Polish your website/blog</h3>
							</li>
							<li class="fragment">
								<h3>Put cool stuff on github</h3>
							</li>
						</ul>
						<aside class="notes">
							some testing notes
						</aside>
					</section>
					<section>
						<h2>2. Apply</h2>
						<ul>
							<li class="fragment">
								<h3>dice, indeed, moster is polluted</h3>
							</li>
							<li class="fragment">
								<h3>linkedin/jobs is also poluted</h3>
							</li>
							<li class="fragment">
								<h3>career.stackoverflow.com/jobs</h3>
							</li>
							<li class="fragment">
								<h3>Groups/ meetups/ Conferences</h3>
							</li>
							<li class="fragment">
								<h3>Weekly/ Javascript weekly/ jobety weekly</h3>
							</li>
							<li class="fragment">
								<h3>Referral</h3>
							</li>
						</ul>
					</section>
					<section>
						<h2>3. Recruiters</h2>
						<ul>
							<li class="fragment">
								<h3>They are smart</h3>
							</li>
							<li class="fragment">
								<h3>They are trying to help you</h3>
							</li>
							<li class="fragment">
								<h3>They are paid by their agent</h3>
							</li>
							<li class="fragment">
								<h3>They are NOT your manager</h3>
							</li>
							<li class="fragment">
								<h3>Use them wisely</h3>
							</li>
						</ul>
					</section>
					<section>
						<h2>4. Phone interview</h2>
						<ul>
							<li class="fragment">
								<h3>Ask for job description</h3>
							</li>
							<li class="fragment">
								<h3>Prepare for it</h3>
							</li>
							<li class="fragment">
								<h3>Get a quite place</h3>
							</li>
							<li class="fragment">
								<h3>Live coding (collabedit)</h3>
							</li>
							<li class="fragment">
								<h3>Check your headphone</h3>
							</li>
							<li class="fragment">
								<h3>Skype interview (test headphone)</h3>
							</li>
						</ul>
					</section>
					<section>
						<h2>5. On site Interview</h2>
						<ul>
							<li class="fragment">
								<h3>Multiple rounds</h3>
							</li>
							<li class="fragment">
								<h3>Check dress code</h3>
							</li>
							<li class="fragment">
								<h3>Prepare seriously</h3>
							</li>
							<li class="fragment">
								<h3>White board coding</h3>
							</li>
							<li class="fragment">
								<h3>HR related questions</h3>
							</li>
						</ul>
					</section>
					<section>
						<h2>6. Before Accepting Offer</h2>
						<ul>
							<li class="fragment">
								<h3>Negotiate</h3>
							</li>
							<li class="fragment">
								<h3>Bonus, share, days off, insurance, 401k</h3>
							</li>
							<li class="fragment">
								<h3>Switch job with big margin</h3>
							</li>
							<li class="fragment">
								<h3>I dont like counter offer</h3>
							</li>
							<li class="fragment">
								<h3>Give enough time to current job</h3>
							</li>
							<li class="fragment">
								<h3>Be nice and grateful</h3>
							</li>
						</ul>
					</section>
					<section>
						<h2>7. Prepare for the new job</h2>
						<ul>
							<li class="fragment">
								<h3>Know your responsibility</h3>
							</li>
							<li class="fragment">
								<h3>Do your homework</h3>
							</li>
							<li class="fragment">
								<h3>Learn framework</h3>
							</li>
							<li class="fragment">
								<h3>Relocate</h3>
							</li>
							<li class="fragment">
								<h3>Create impression in 1st week</h3>
							</li>
						</ul>
					</section>
				</section>
				<section>
					<section>
						<h1>Resume</h1>
						<img src="images/resume.jpg" alt="">
					</section>
					<section>
						<h2>Resume</h2>
						<ul>
							<li class="fragment">
								<h3>1/2 pages</h3>
							</li>
							<li class="fragment">
								<h3>I hate objective</h3>
							</li>
							<li class="fragment">
								<h3>Summary of technologies</h3>
							</li>
							<li class="fragment">
								<h3>Don't write stories/ paragraphs</h3>
							</li>
							<li class="fragment">
								<h3>Use bullet points</h3>
							</li>
							<li class="fragment">
								<h3>achievement, not responsibility</h3>
							</li>
							<li class="fragment">
								<h3>Action Verb + Task + Result</h3>
							</li>
							<li class="fragment">
								<h3>5 sec test</h3>
							</li>
						</ul>
					</section>
					<section>
						<h2>Don't Be too honest</h2>
						<img src="images/honest.jpg" alt="">
					</section>
					<section>
						<h2>No Reference</h2>
						<img src="images/references.jpg" alt="">
					</section>
					<section>
						<h2>Cover letter</h2>
						<li>Personally, I hate it :(</li>
					</section>
				</section>
				<section>
					<section>
						<h1>HTML</h1>
						<img src="images/html.jpg" alt="">
					</section>
					<section>
						<h2>HTML</h2>
						<ul>
							<li class="fragment"><h3>doctype</h3></li>
							<li class="fragment"><h3>html5</h3></li>
							<li class="fragment"><h3>span vs div</h3></li>
							<li class="fragment"><h3>inline vs block</h3></li>
							<li class="fragment"><h3>svg vs canvas</h3></li>
						</ul>
						<br>
						<br>
						<a href="http://www.thatjsdude.com/interview/html.html">html question answers</a>
					</section>
					<section>
						<h2>Html</h2>
						<ul>
							<li class="fragment"><h3>data-* attribute</h3></li>
							<li class="fragment"><h3>standard vs quirk mode</h3></li>
							<li class="fragment"><h3>semantic tag</h3></li>
							<li class="fragment">serve html in multiple language</li>
						</ul>
						<br>
						<br>
						<br>
						<a href="http://www.thatjsdude.com/interview/html.html">html question answers</a>
					</section>
				</section>
				<section>
					<section>
						<h1>CSS</h1>
						<img src="images/css.jpg" alt="">
					</section>
					<!-- <section>
						<img class="stretch" src="images/css1.jpg" alt="">
					</section> -->
					<section>
						<h2>CSS - beginner</h2>
						<ul>
							<li class="fragment">
								<h3>px, em, %</h3>
							</li>
							<li class="fragment">
								<h3>visibility hidden vs display none</h3>
							</li>
							<li class="fragment">
								<h3>absolute, relative, fixed, static position</h3>
							</li>
							<li class="fragment">
								<h3>inline, block, inline-block</h3>
							</li>
							<li class="fragment">
								<h3>float, clear</h3>
							</li>
							<li class="fragment">
								<h3>pseudo classes</h3>
							</li>
							<li class="fragment">
								<h3>align center-center p in a div</h3>
							</li>
						</ul>
						<br>
						<br>
						<a href="http://www.thatjsdude.com/interview/css.html">CSS Questions Answer</a>
					</section>
					<section>
						<h2>CSS - intermediate</h2>
						<ul>
							<li class="fragment">
								<h3>Responsive</h3>
							</li>
							<li class="fragment">
								<h3>pre-processor</h3>
							</li>
							<li class="fragment">
								<h3>framework</h3>
							</li>
							<li class="fragment">
								<h3>media query</h3>
							</li>
							<li class="fragment">
								<h3>Specificity</h3>
							</li>
							<li class="fragment">
								<h3>download conditional css files</h3>
							</li>
						</ul>
						<br>
						<a href="http://www.thatjsdude.com/interview/css.html">CSS Questions Answer</a>
					</section>
					<section>
						<img src="images/webDesigner.jpg" alt="">
					</section>
					<section>
						<img src="images/menu.png" alt="" class="stretch">
					</section>
					<section>
						<img src="images/mockUp.png" alt="" class="stretch">
					</section>
					<section>
						<img src="images/layout.png" alt="" class="stretch">
					</section>
					<section>
						<img src="images/button.png" alt="" class="stretch">
						<a href="http://css-tricks.com/interview-questions-css/">css tricks: interview questions</a>
					</section>
				</section>
				<section>
					<section>
						<h1>JavaScript</h1>
						<img src="images/javascript.jpg" alt="">
					</section>
					<section>
						<h2>Basics</h2>
						<ul>
							<li class="fragment">
								<h3>null vs undefined</h3>
							</li>
							<li class="fragment">
								<h3>== vs ===</h3>
							</li>
							<li class="fragment">
								<h3>class</h3>
							</li>
							<li class="fragment">
								<h3>Ajax</h3>
							</li>
							<li class="fragment">
								<h3>bind, call,	 apply</h3>
							</li>
							<li class="fragment">
								<h3>this</h3>
							</li>
						</ul>
						<br>
						<br>
						<a href="http://www.thatjsdude.com/interview/js2.html">JS questions</a>
					</section>
					<section>
						<h2>Algorithm</h2>
						<ul>
							<li class="fragment">
								<h3>fibonacci</h3>
							</li>
							<li class="fragment">
								<h3>reverse string</h3>
							</li>
							<li class="fragment">
								<h3>remove duplicate from array</h3>
							</li>
							<li class="fragment">
								<h3>merge sorted array</h3>
							</li>
							<li class="fragment">
								<h3>palindrome</h3>
							</li>
							<li class="fragment">
								<h3>all permutation of a string</h3>
							</li>
						</ul>
						<br>
						<br>
						<a href="http://www.thatjsdude.com/interview/js1.html">JS: algorithm</a>
					</section>
					<section>
						<h2>String Reverse</h2>
						<pre><code>
function reverse(str){
  var rtnStr = '';

  for(var i = str.length-1; i>=0;i--){
    rtnStr +=str[i];
  }
  return rtnStr;
}
						</code></pre>
						<pre class="fragment"><code>
> reverse('you are a nice dude');
  = "edud ecin a era uoy"
						</code></pre>
					</section>
					<section>
						<h2>recursive</h2>
						<pre><code>
function reverse (str) {
    if (str === "") {
        return "";
    } else {
        return reverse(str.substr(1)) + str.charAt(0);
    }
}
						</code></pre>
					</section>
					<section>
						<h2>use build in method</h2>
						<pre><code>
function reverse(str){

  return str.split('').reverse().join('');

}
						</code></pre>
					</section>
					<section>
						<h2>Extension of native String</h2>
						<pre><code>
String.prototype.reverse = function (){
  return this.split('').reverse().join('');
}

						</code></pre>
						<pre class="fragment"><code>

> 'js dude'.reverse();
  = "edud sj"
						</code></pre>
					</section>
					<section>
						<h2>JavaScript - intermediate</h2>
						<ul>
							<li class="fragment">
								<h3>prototype chain</h3>
							</li>
							<li class="fragment">
								<h3>closure</h3>
							</li>
							<li class="fragment">
								<h3>pass by value or ref</h3>
							</li>
							<li class="fragment">
								<h3>jquery like chaining</h3>
							</li>
							<li class="fragment">
								<h3>memoization</h3>
							</li>
						</ul>
					</section>
					<section>
						<h2>JS - DOM</h2>
						<ul>
							<li class="fragment">
								<h3>window vs document</h3>
							</li>
							<li class="fragment">
								<h3>Add a class to an element</h3>
							</li>
							<li class="fragment">
								<h3>innerHTML vs CreateElement</h3>
							</li>
							<li class="fragment">
								<h3>reflow vs repaint</h3>
							</li>
							<li class="fragment">
								<h3>Event bubble</h3>
							</li>
							<li class="fragment">
								<h3>get all text in a web page</h3>
							</li>
						</ul>
						<br>
						<a href="http://www.thatjsdude.com/interview/dom.html">DOM related Questions Answer</a>
					</section>
					<section>
						<h2>Framework</h2>
						<ul>
							<li class="fragment">
								<h3>What you like about Angular</h3>
							</li>
							<li class="fragment">
								<h3>What you dont like</h3>
							</li>
							<li class="fragment">
								<h3>How will you select a framework</h3>
							</li>
							<li class="fragment">
								<h3>Pass Event between scope</h3>
								<p><a href="http://stackoverflow.com/questions/14502006/scope-emit-and-on-in-angularjs">emit vs broadcast vs on</a></p>
							</li>
							<li class="fragment">
								<h3><a href="http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory">Service vs Provide vs Factory</a></h3>
							</li>
							<li class="fragment">
								<h3>What do you think about performance</h3>
							</li>
						</ul>
					</section>
				</section>
				<section>
					<section>
						<h1>HR related</h1>
						<img src="images/yah.jpg" alt="">
					</section>
					<section>
						<h2>HR related</h2>
						<ul>
							<li class="fragment">
								<h3>Tell me about yourself</h3>
							</li>
							<li class="fragment">
								<h3>What is your weakness</h3>
							</li>
							<li class="fragment">
								<h3>How you resolve conflict</h3>
							</li>
							<li class="fragment">
								<h3>Introduce New Technology</h3>
							</li>
							<li class="fragment">
								<h3>Why change your current job</h3>
							</li>
							<li class="fragment">
								<h3>Expected Salary?</h3>
							</li>
						</ul>
					</section>
				</section>

				<section>
					<h1>Resources</h1>
					<ul>
						<li><a href="https://github.com/darcyclarke/Front-end-Developer-Interview-Questions">Dracy clarke: Front End Interview Questions</a></li>
						<li><a href="http://www.thatjsdude.com/interview/">JS dude interview question</a></li>
						<li><a href="https://github.com/khan4019/front-end-Interview-Questions">all questions by JS Dude</a></li>
						<li><a href="http://css-tricks.com/interviewing-front-end-engineer-san-francisco/">Chris Coyier: Interview Experience </a></li>
						<li>careercup.com</li>
						<li>glassdoor</li>
					</ul>
				</section>
				<section>
					<section>
						<img src="images/html1.jpg" alt="">
					</section>
					<section>
						<img src="images/foundJob.jpg" alt="">
					</section>
				</section>
				<section>
					<br>
					<h2><a href="http://goo.gl/89K2FI">http://goo.gl/89K2FI</a></h2>
					<br>
					<br>
					<p>
						<h3>
							<a href="http://www.thatjsdude.com/">www.thatJSdude.com</a> / <a href="http://twitter.com/mdkhan005">@mdkhan005</a>
						</h3>
					</p>
					<p>(youtube.com/user/khanLearning)</p>
					<br>
					<br>
					<br>
					<p>Thank you</p>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

				// Parallax scrolling
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

	</body>
</html>
